<template>
    <div class="main">
        <div class="top">
            <div>飞鸟账号登录</div> 
            <div>
                <el-input class="inputDeep" id="user_name"
                    v-model="nickname"
                    placeholder="请输入用户名" 
                    size="small"
                    @keyup.enter = "handleLogin"
                  />
                <el-input class="inputDeep" id="pwd"
                    v-model="password" 
                    type="password" 
                    size="small"  
                    placeholder="请输入密码"
                    show-password
                    @keyup.enter = "handleLogin"
                  />
                <el-button type="danger" @click="handleLogin" :loading="isLoading">登录</el-button>
                <div>
                    <div class="registry">注册</div>
                    <div class="forgetPwd">忘记密码</div>
                </div>
            </div> 
        </div>
        <div class="bottom">
               <div>
                ------使用其他账号登录------
               </div>
               <div>
                <div class="introduction">
                    我们为您提供飞鸟账号服务，在登录过程中会使用到您的账号和网络信息提升登录体验
                    <a href="#">了解更多</a>
                </div>
             
               </div>
        </div>
    </div>
   
</template>

<script setup lang="ts">
import {ref,watch } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import  {useUser} from "@/store/userChat"
import {useAuthStore} from "@/store/userInfo"
import {ElNotification} from 'element-plus'

const baseUrl = 'http://localhost:8180'
const router = useRouter()
const authStore = useAuthStore()
let nickname = ref<string>('')
let password = ref<string>('')
let isLoading =ref<boolean>(false);
// 监听 nickname 的变化
watch(nickname, (newValue) => {
  if (newValue === '') {
    // 如果 nickname 为空，清空 password
    password.value = ''
  }
})
async function handleLogin() {
    isLoading.value = true;

    try {
        // 使用POST方法发送请求，并附带用户名和密码
        const response = await axios.post(baseUrl + '/login/password', {
            username: nickname.value,
            password: password.value
        });
        // 从这里开始，是处理响应的逻辑
        isLoading.value = false;
        const data = response.data.user;
        console.log(data);
        if (data === '') {
            ElNotification({
                title: 'Failed',
                message: "不存在此用户",
                type: 'error'
            });
            return;
        } else if (password.value !== data.password) {
            ElNotification({
                title: 'Failed',
                message: "密码错误",
                type: 'error'
            });
            return;
        }

        if (data.userType === 'admin' && password.value === data.password && nickname.value === data.username) {
            authStore.login(data.id, data.username, data.password, data.userType, data.email, data.phoneNumber, data.avatarUrl);
            submitCreate()
            router.push('/order/historyOrder');
        } else if (data.userType === 'customer' && password.value === data.password && nickname.value === data.username) {
            authStore.login(data.id, data.username, data.password, data.userType, data.email, data.phoneNumber, data.avatarUrl);
            submitCreate()
            router.push('/home');
        }
        else if(data.userType === 'courier' && password.value === data.password && nickname.value == data.username){
            authStore.login(data.id, data.username, data.password, data.userType, data.email, data.phoneNumber, data.avatarUrl);
            submitCreate()
            router.push('/orderMarket')

        }

    } catch (error) {
        // 处理请求错误
        console.error('Error fetching data:', error);
        isLoading.value = false;
        // 可以在这里添加一个用户友好的错误通知
        ElNotification({
            title: 'Error',
            message: "登录请求失败，请稍后再试。",
            type: 'error'
        });
    }
}

/**
 * 欢迎弹窗
 */
const submitCreate = ()=>{
    if(nickname.value && password.value){
        ElNotification({
                    title:'Success',
                    message:'欢迎'+nickname.value,
                    type:'success'
                })
    }
    else{
        ElNotification({
            title:'Warning',
            message:'请输入用户账号或密码',
            type:'warning'
        })
    }
}

</script>

<style scoped lang="less">
.main{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.top{   
        flex:4;
        display: flex;
        flex-direction: column;
        >div:first-child{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
           
            font-weight: 700;
        }
        >div:nth-child(2){
            flex: 4;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: antiquewhite;
            padding: 1rem;
            #username{
                flex: 1;
                margin-top: 1vh;
            };
            #pwd{
                flex: 1;
            }
            >div{
                .registry:hover{
                       
                    cursor: pointer;
                    color: blue;
                }
                .forgetPwd:hover{
                    cursor: pointer;
                    color: blue;
                }
                display: flex;
                justify-content: center;
                >div:first-child{
                    border-right: 1px solid rgb(185, 181, 181);
                    margin-right: 1rem;
                }
                >div{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1rem;
                    font-family: 'Microsoft YaHei';
                    color: #acafb6;
                    width: 20%;
                }
            }
        }
    
}
.bottom{
  
              
        flex: 3;
        display: flex;
        flex-direction: column;
        >div:first-child{
            flex:1;
            background-color:  #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.9rem;
            font-family: 'Microsoft YaHei';
            color: rgb(20, 2, 2);
            &:hover{
                cursor: pointer;
                color: blue;
            }
        }
       
        >div:nth-child(2){
            flex:1;
            background-color:  #ffffff;
            font-size: 0.7rem;
            font-family: 'Microsoft YaHei';
            color: rgb(139, 129, 129);
            display: flex;
            justify-content: center;
            .introduction{
                width: 80%;
                height: 20%;
              
            }
        }
    
}
.el-button{
    font-size: 1.2rem;
  
    color: white;
}
:deep(.el-input){
    font-size: 1.0rem;
}
:deep(.el-input__wrapper){
    border-radius: 0px;
}
:deep(.el-input__inner){
    height: 2.5rem !important;
}
</style>